<template>
  <div class="app-container">
    <div class="Aline1">
      <div class="Bcolumn1">
        <div class="BlueDiv"></div>
        <div class="Btext1">系统设备统计</div>
      </div>
      <div class="Bcolumn2">
        <div class="ClineBord"></div>
        <div class="Cline1">
          <el-text>能耗监测系统</el-text>
        </div>
        <div class="Cline2">
          <div>19/304/934</div>
        </div>
        <div class="Cline3">
          <div>网关/设置/传送点</div>
        </div>
      </div>
      <div class="Bcolumn3">
        <div class="ClineBord"></div>
        <div class="Cline1">
          <el-text>楼宇控制系统</el-text>
        </div>
        <div class="Cline2">
          <div>11/121/595</div>
        </div>
        <div class="Cline3">
          <div>网关/设置/传送点</div>
        </div>
      </div>
      <div class="Bcolumn4">
        <div class="ClineBord"></div>
        <div class="Cline1">
          <el-text>智能照明系统</el-text>
        </div>
        <div class="Cline2">
          <div>3/49/1058</div>
        </div>
        <div class="Cline3">
          <div>网关/设置/传送点</div>
        </div>
      </div>
      <div class="Bcolumn5">
        <div class="ClineBord"></div>
        <div class="Cline1">
          <el-text>电力监控系统</el-text>
        </div>
        <div class="Cline2">
          <div>0</div>
        </div>
      </div>
    </div>
    <div class="Aline2">
      <div class="Bcolumn1">
        <div class="Cline1">
          <div class="DlueDiv"></div>
          <div class="Dtext1">用能统计</div>
        </div>
        <div class="Cline2">
          <div class="Dcolumn1"></div>
          <div class="Dcolumn2">
            <div class="Etext1">00:00至13:00</div>
            <div class="Etext2">今日累计用电(kW/h)</div>
            <div class="Etext3">1233.36</div>
            <div class="Etext4">较昨日用电 下降44%</div>
          </div>
          <div class="Dcolumn2">
            <div class="Etext1">10-01至10-13</div>
            <div class="Etext2">本月累计用电(kW/h)</div>
            <div class="Etext3">-68913.4</div>
            <div class="Etext4">较上月用电 下降334%</div>
          </div>
          <div class="Dcolumn2">
            <div class="Etext1">01-01至10-13</div>
            <div class="Etext2">本年累计用电(kW/h)</div>
            <div class="Etext3">-39423.22</div>
            <div class="Etext4">较去年用电 无变化</div>
          </div>
        </div>
        <div class="Cline2">
          <div class="Dcolumn1"></div>
          <div class="Dcolumn2">
            <div class="Etext1">00:00至13:00</div>
            <div class="Etext2">今日累计用电(kW/h)</div>
            <div class="Etext3">1233.36</div>
            <div class="Etext4">较昨日用电 下降44%</div>
          </div>
          <div class="Dcolumn2">
            <div class="Etext1">10-01至10-13</div>
            <div class="Etext2">本月累计用电(kW/h)</div>
            <div class="Etext3">-68913.4</div>
            <div class="Etext4">较上月用电 下降334%</div>
          </div>
          <div class="Dcolumn2">
            <div class="Etext1">01-01至10-13</div>
            <div class="Etext2">本年累计用电(kW/h)</div>
            <div class="Etext3">-39423.22</div>
            <div class="Etext4">较去年用电 无变化</div>
          </div>
        </div>
      </div>
      <div class="Bcolumn2">
        <div class="Cline1">
          <div class="DlueDiv"></div>
          <div class="Dtext1">近7天用能排名</div>
        </div>
        <div class="Cline2">
          <div class="Dcolumn1">
            <div class="Etext1">用电排名(kW/h)</div>
          </div>
          <div class="Dcolumn1 ML4p">
            <div class="Etext1">用水排名(m³)</div>
          </div>
        </div>
        <div class="Cline3">
          <div class="Dcolumn1">
            <div
              ref="horizontalChartRefElectricity"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="Dcolumn1 ML4p">
            <div
              ref="horizontalChartRefWater"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="Aline3">
      <div class="Bcolumn1">
        <div class="Cline1">
          <div class="DlueDiv"></div>
          <div class="Dtext1">近7天报警统计</div>
        </div>
        <div class="Cline2">
          <div class="Dcolumn1">
            <div
              ref="pieChartRefAAAAA"
              style="width: 100%; height: 110%; transform: translate(0, -5%)"
            ></div>
          </div>
          <div class="Dcolumn1">
            <el-table v-loading="loading" :data="roomList">
              <el-table-column label="事件源" align="center" prop="name" />
              <el-table-column label="报警次数" align="center" prop="count" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="Bcolumn2">
        <div class="Cline1">
          <div class="DlueDiv"></div>
          <div class="Dtext1">近7天用能趋势</div>
          <el-tabs
            v-model="tabsListID"
            @tab-click="tabsToGetList"
            type="card"
            style="margin-top: -1%; float: right"
          >
            <el-tab-pane
              v-for="item in tabsList"
              :key="item.id"
              :label="item.name"
              :name="item.id"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="Cline2">
          <div
            ref="columnChartRefAAAAA"
            style="width: 100%; height: 100%"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.app-container {
  height: 89vh;
  width: 100%;
  overflow: scroll;
  .Aline1 {
    height: 15%;
    width: 100%;
    .Bcolumn1 {
      width: 12%;
      height: 100%;
      display: flex;
      margin-top: 1vh;
      .Btext1 {
        margin-left: 2%;
        width: 80%;
      }
      .BlueDiv {
        background-color: blue;
        margin-top: 0.3vh;
        height: 2vh;
        width: 2%;
      }
    }
    .Bcolumn2 {
      width: 26%;
    }
    .Bcolumn3 {
      width: 26%;
    }
    .Bcolumn4 {
      width: 26%;
    }
    .Bcolumn5 {
      width: 10%;
    }
    .ClineBord {
      height: 20%;
    }
    .Cline1 {
      height: 30%;
    }
    .Cline2 {
      height: 25%;
      font-size: 3.2vh;
    }
    .Cline3 {
      height: 25%;
      font-size: 1.5vh;
    }
  }
  .Aline2 {
    margin-top: 2vh;
    height: 48%;
    width: 100%;
    display: flex;
    .Bcolumn1 {
      width: 49%;
      height: 100%;
      .Cline2 {
        height: 45%;
        width: 100%;
        //   background-color: aqua;
        display: flex;
      }
      .Dcolumn1 {
        width: 10%;
        height: 100%;
      }
      .Dcolumn2 {
        width: 30%;
        height: 100%;
      }
      .Etext1 {
        font-size: 1.5vh;
        margin-top: 3%;
      }
      .Etext2 {
        font-size: 2vh;
        margin-top: 3%;
      }
      .Etext3 {
        font-size: 3vh;
        margin-top: 3%;
      }
      .Etext4 {
        font-size: 1.5vh;
        margin-top: 3%;
      }
    }
    .Bcolumn2 {
      margin-left: 2%;
      width: 49%;
      height: 100%;
      .Cline2 {
        width: 100%;
        height: 10%;
        display: flex;
        .Dcolumn1 {
          width: 48%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid;
        }
      }
      .Cline3 {
        height: 80%;
        width: 100%;
        display: flex;
        .Dcolumn1 {
          width: 48%;
          height: 100%;
        }
      }
      .ML4p {
        margin-left: 4%;
      }
    }
    .Cline1 {
      display: flex;
      height: 10%;
      width: 100%;
      .Dtext1 {
        margin-left: 2%;
        width: 80%;
      }
      .DlueDiv {
        background-color: blue;
        margin-top: 0.3vh;
        height: 2vh;
        width: 5px;
      }
    }
  }
  .Aline3 {
    margin-top: 2vh;
    height: 48%;
    width: 100%;
    display: flex;
    .Bcolumn1 {
      width: 49%;
      height: 100%;
      .Cline2 {
        height: 90%;
        width: 100%;
        display: flex;
        .Dcolumn1 {
          margin-top: 2vh;
          width: 50%;
          height: 100%;
        }
      }
    }
    .Bcolumn2 {
      margin-left: 2%;
      width: 49%;
      height: 100%;
      .Cline2 {
        height: 90%;
        width: 100%;
        display: flex;
      }
    }
    .Cline1 {
      display: flex;
      height: 10%;
      width: 100%;
      .Dtext1 {
        margin-left: 2%;
        width: 80%;
      }
      .DlueDiv {
        background-color: blue;
        margin-top: 0.3vh;
        height: 2vh;
        width: 5px;
      }
    }
  }
}
</style>
<script setup>
const tabsList = ref([
  { id: 0, name: "用电" },
  { id: 1, name: "用水" },
]);
const tabsListID = ref(0);

function tabsToGetList(pane) {
  let id = pane.props.name;
  let item = {};
  tabsList.value.forEach((item1) => {
    if (item1.id == id) {
      item = item1;
    }
  });
  switch (item.id) {
    case 0:
      createColumnChartAAAAA(
        15,
        ["7-24", "7-24", "7-24", "7-24", "7-24", "7-24", "7-24"],
        [10, 6, 9, 26, 50, 20, 40],
        "kw/h"
      );
      break;
    case 1:
      createColumnChartAAAAA(
        15,
        ["7-24", "7-24", "7-24", "7-24", "7-24", "7-24", "7-24"],
        [30, 50, 2, 10, 70, 50, 10],
        "m³"
      );
      break;
    default:
      break;
  }
  console.log(item);
}

const { proxy } = getCurrentInstance();

import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  let dataList = [
    {
      name: "报警",
      value: 80,
    },
    {
      name: "恢复",
      value: 20,
    },
  ];
  let colorList = [
    ["#F11C1CFF", "#F36565FF"],
    ["#172BE2FF", "#6585FBFF"],
  ];
  createPieChartAAAAA(dataList, colorList, 80);
});
const pieChartRefAAAAA = ref(null);
function createPieChartAAAAA(dataList, colorList, showText) {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(pieChartRefAAAAA.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      show: "true", //是否显示标题，默认显示，可以不设置
      text: "报警统计",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      top: 50,
    },
    series: [
      {
        name: "告警统计",
        type: "pie",
        radius: ["60%", "80%"], // 设置饼图大小
        center: ["50%", "50%"],
        minAngle: 5, //最小角度
        startAngle: 0,
        endAngle: 360,
        //labelLine: {
        //  //删除指示线
        //  show: false,
        //},
        data: dataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        itemStyle: {
          normal: {
            color: function (params) {
              var index = params.dataIndex;
              // 颜色渐变函数 前四个参数分别表示四个位置依次为
              // 右下左上
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colorList[index][0],
                },
                {
                  offset: 1,
                  color: colorList[index][1],
                },
              ]);
            },
          },
        },
      },
    ],
    graphic: [
      {
        type: "group",
        left: "center",
        top: "40%",
        children: [
          {
            type: "text",
            left: "center",
            top: 0,
            style: {
              text: showText,
              width: 23,
              height: 24,
              fontFamily: "DIN1451EF EngNeu",
              fontWeight: 400,
              fontSize: 33,
              fill: "#218CFF",
              lineHeight: 21,
              // 让背景应用到文字上
              backgroundClip: "text",
              textFill: "transparent",
              align: "center",
            },
          },
          {
            type: "text",
            top: 30,
            left: -10,
            style: {
              text: "报警",
              width: 10,
              height: 11,
              fontFamily: "FZCuYuan-M03S",
              fontSize: 13,
              fill: "#218CFF",
              lineHeight: 21,
            },
          },
        ],
      },
    ],
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
}

onMounted(() => {
  createColumnChartAAAAA(
    15,
    ["7-24", "7-24", "7-24", "7-24", "7-24", "7-24", "7-24"],
    [10, 6, 9, 26, 50, 20, 40],
    "kw/h"
  );
});
const columnChartRefAAAAA = ref(null);
function createColumnChartAAAAA(thickness, xData, yData, unit) {
  const chart = echarts.init(columnChartRefAAAAA.value);
  const option = {
    title: {
      text: unit,
      left: 16,
      textStyle: {
        color: "#575555",
        fontStyle: "normal",
        fontWeight: "bolder",
        fontSize: 12,
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      // top: '5%',
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: function (parms) {
        return parms.marker + " " + parms.name + "：" + parms.value + unit;
      },
    },
    xAxis: {
      type: "category",
      data: xData,
      axisTick: { show: false },
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.15)" } },
      axisLabel: {
        color: "#2A2E3E", // 文字颜色
        fontSize: 12, // 字体大小
        fontFamily: "Adobe Heiti Std", // 字体
        fontWeight: "normal", // 字体粗细
        fontStyle: "italic", // 斜体字
        // lineHeight: 80, // 行高
        margin: 20, // 距离坐标轴的间距
        interval: 0, // 确保显示所有标签
      },
    },
    yAxis: {
      type: "value",
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { color: "#2A2E3E", fontSize: 12 },
      splitLine: { lineStyle: { color: "rgba(255,255,255,0.15)" } },
    },
    series: [
      {
        name: "上椭圆A",
        type: "pictorialBar",
        symbolSize: [thickness, 10],
        symbolOffset: [0, "-50%"], //
        z: 12,
        symbolPosition: "end",
        // 顶端的文字
        label: {
          normal: {
            show: true,
            position: "top",
            fontSize: 14,
            formatter: function (params, index) {
              return params.value + unit;
            },
          },
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#68C7FF" },
              { offset: 1, color: "#49A5F7" },
            ],
            false
          ),
        },
        data: yData,
      },
      {
        name: "下椭圆A",
        type: "pictorialBar",
        symbolSize: [thickness, 10],
        symbolOffset: [0, 7],
        z: 12,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#49A5F7" },
            { offset: 1, color: "#49A5F7" },
          ]),
        },
        data: yData,
      },
      {
        name: "数据A",
        type: "bar",
        barWidth: thickness,
        barGap: "10%",
        barCateGoryGap: "10%",
        data: yData,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              { offset: 0, color: "#68C7FF" },
              { offset: 1, color: "#49A5F7" },
            ],
          },
        },
      },
    ],
  };
  chart.setOption(option);
}

onMounted(() => {
  createHorizontalChartElectricity(
    [
      ["建筑1", 10],
      ["建筑2", 8],
      ["建筑3", 30],
      ["建筑4", 25],
      ["建筑5", 60],
    ],
    "kw/h"
  );
});
const horizontalChartRefElectricity = ref(null);
function createHorizontalChartElectricity(data, unit) {
  const chart = echarts.init(horizontalChartRefElectricity.value);
  const option = {
    grid: {
      left: "5%",
      right: "5%",
      // top: '5%',
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: function (parms) {
        return parms.marker + " " + parms.name + "：" + parms.value + unit;
      },
    },
    yAxis: {
      type: "category",
      axisTick: { show: false },
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.15)" } },
      axisLabel: {
        color: "#2A2E3E", // 文字颜色
        fontSize: 12, // 字体大小
        fontFamily: "Adobe Heiti Std", // 字体
        fontWeight: "normal", // 字体粗细
        fontStyle: "italic", // 斜体字
        // lineHeight: 80, // 行高
        margin: 20, // 距离坐标轴的间距
        interval: 0, // 确保显示所有标签
      },
    },
    xAxis: {},
    dataset: [
      {
        dimensions: ["name", "value"],
        source: data,
      },
      {
        transform: {
          type: "sort",
          config: { dimension: "value", order: "desc" },
        },
      },
    ],
    series: [
      {
        type: "bar",
        encode: { x: "value", y: "name" },
        datasetIndex: 1,
      },
    ],
  };
  chart.setOption(option);
}

onMounted(() => {
  createHorizontalChartWater(
    [
      ["建筑1", 30],
      ["建筑2", 18],
      ["建筑3", 5],
      ["建筑4", 14],
      ["建筑5", 27],
    ],
    "m³"
  );
});
const horizontalChartRefWater = ref(null);
function createHorizontalChartWater(data, unit) {
  const chart = echarts.init(horizontalChartRefWater.value);
  const option = {
    grid: {
      left: "5%",
      right: "5%",
      // top: '5%',
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: function (parms) {
        return parms.marker + " " + parms.name + "：" + parms.value + unit;
      },
    },
    yAxis: {
      type: "category",
      axisTick: { show: false },
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.15)" } },
      axisLabel: {
        color: "#2A2E3E", // 文字颜色
        fontSize: 12, // 字体大小
        fontFamily: "Adobe Heiti Std", // 字体
        fontWeight: "normal", // 字体粗细
        fontStyle: "italic", // 斜体字
        // lineHeight: 80, // 行高
        margin: 20, // 距离坐标轴的间距
        interval: 0, // 确保显示所有标签
      },
    },
    xAxis: {},
    dataset: [
      {
        dimensions: ["name", "value"],
        source: data,
      },
      {
        transform: {
          type: "sort",
          config: { dimension: "value", order: "desc" },
        },
      },
    ],
    series: [
      {
        type: "bar",
        encode: { x: "value", y: "name" },
        datasetIndex: 1,
      },
    ],
  };
  chart.setOption(option);
}
</script>
